<template>
  <div>
    <!--首页轮播图-->
    <Carousel />
    <!--首页搜索区-->
    <Search />
    <!--底部-->
    <el-row :gutter="20">
      <el-col :span="20"
        ><Level @getLevel="getLevel"/>
        <!--地区-->
        <Region @getRegion="getRegion"/>
        <!--医院结构-->
        <div class="hospital" v-if="hasHospitalArr.length>0">
          <Card class="item" v-for="(item,index) in hasHospitalArr" :key="index" :hospitalInfo="item" />
          <!--分页器-->
        </div>
        <el-empty v-else description="暂无数据" />
        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          v-model:total="total"
          @current-change="currentChange"
          @size-change="sizechange"
        />
      </el-col>
      <el-col :span="4">
        <Tip/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
//引入组合式API函数
import { onMounted, ref } from "vue";

import { reqHospital } from "@/api/home";
//引入首页轮播组件
import Carousel from "./carousel/index.vue";
//引入首页搜索组件
import Search from "./search/index.vue";
//引入首页等级组件
import Level from "./level/index.vue";

import Region from "./region/index.vue";

import Card from "./card/index.vue";

//引入右侧组件
import Tip from "./tip/index.vue";

import type { Content } from "@/api/home/type";
import { CURRENT_CHANGE } from "element-plus/es/components/tree-v2/src/virtual-tree.mjs";

//分页器页码
let pageNo = ref<number>(1);
//一页展时几条数据
let pageSize = ref<number>(10);

//存储已有的医院的数据
let hasHospitalArr = ref<Content>([]);

//存储医院等级
let hostype=ref<string>('');

//存储医院地区
let distritCode=ref<string>('');
//存储已有医院的总个数
let total = ref<number>(0);

//组件挂载完毕 发一次请求
onMounted(() => {
  getHospitalInfo();
});
//获取已有的数据
const getHospitalInfo = async () => {
  //获取医院数据：默认获取第一页
  let result: any = await reqHospital(pageNo.value, pageSize.value,hostype.value,distritCode.value);
 // console.log('app组件展示获取的数据111',result.data.code);
  if (result.data.code == 200) {
    
    hasHospitalArr.value = result.data.data.content;
    total.value = result.data.data.totalElements;
  }
};
//分页器页码发生变化时回溯
const currentChange=()=>{
  getHospitalInfo();
};
const sizechange=()=>{
  pageNo.value=1;
  getHospitalInfo();
}


const getLevel=(level:string)=>{
//收集等级参数 
hostype.value=level;
getHospitalInfo();
}

const getRegion=(region:string)=>
{
distritCode.value=region;
getHospitalInfo();
}

</script>
<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap; //换行
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 5px 0;
  }
}
</style>
